<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>车贴申请</title>
    <link rel="stylesheet" href="../../../resource/css/payment.css">
    <link rel="stylesheet" href="../../../resource/css/style.css">
</head>
<style>
   </style>
<body>
    <div class="content">
        <div class="logo">
            <img src="../../../resource/img/LOGO.png"/>
        </div>
        <form action="" method="POST">
            <table>
                <tr>
                    <td class="caption">手机号:</td>
                    <td><input class="phone" type="text" name="phone" placeholder="请输入手机号" value=""></td>
                </tr>
                <tr>
                    <td class="caption">车贴数量:</td>
                    <td>
                        <input class="input3 bor-e3 ml-8" id="reduce" type="button">
                        <input class="input2 text-c" readonly="true" id="num" name="number" type="text" name="count" value="10">
                        <input class="input4 bor-e3" id="add" type="button">
                    </td>
                </tr>
                <tr>
                    <td class="caption">应支付钱数:</td>
                    <td><input class="account" id="account" type="text" name="amount" readonly="readonly"></td>
                </tr>
            </table>
            <button id="btn" class="submit" type="button">支付</button>
        </form>

    </div>
</body>

<!--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>
<!--<script src='https://static.app1.magcloud.net/public/static/dest/js/libs/magjs-x.js'></script>-->
<script>
    var token;
    var j = 0;
    mag.toLogin(function(rs){
       token = rs.token;
    });
</script>
<script>
    var i = $("#num").val();
    $("#account").attr("value", i * 5);
    $("#add").click(function () {
        i++;
        $("#num").attr("value", i);
        $("#account").attr("value", i * 5);
    }),
    $("#reduce").click(function (){
        if (i > 10) {
            i--;
            $("#num").attr("value", i);
            $("#account").attr("value", i * 5);
            if (i < 0) {
                $("#num").attr("value", 0);
                i = 0;
            };
        }
    })
</script>

<!--button点击事件-->
<script>
    // let res;
    $("#btn").click(function () {
        var phone = $('input[name=phone]').val();
        var number = $('input[name=number]').val();
        var amount = $('input[name=amount]').val();
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!phone) {
            mag.toast('手机号不能为空');
            return false;
        } else if(!myreg.test(phone)){
            mag.toast('手机号格式不正确');
            return false;
        }

        // 数据请求
        $.ajax({
            type:'POST',
            url: "/Pay/getUserUnionOrderNum",
            data:{
                phone:phone,
                number:number,
                amount:amount,
                token:token,
            },
            dataType:'json',
            success: function (data) {
                if (data.code == 200) {
                    let config;
                    config = {
                        'money':data.data.amount,
                        'title':data.data.title,
                        'des':data.data.des,
                        'orderNum':data.data.trade_no,
                        'unionOrderNum':data.data.unionOrderNum,
                        'payWay':{
                            'wallet':1,
                            'weixin':1,
                            'alipay':1,
                        },
                        'type':'客户端支付',
                    };
                    mag.pay(config, function(e){
                        // mag.toast('支付成功');
                        $.ajax({
                            type:'POST',
                            url: "/Pay/updateOrderStatus",
                            data:{
                                phone:phone,
                                union_order_num:data.data.unionOrderNum,
                                status:1,
                                token:token,
                            },
                            dataType:'json',
                            success:function (e) {
                                mag.toast("支付成功");
                                // mag.toast(e.msg);
                            }
                        });
                    }, function(){
                        // 支付失败回调
                        mag.toast('支付失败');
                        $.ajax({
                            type:'POST',
                            url: "/Pay/updateOrderStatus",
                            data:{
                                phone:phone,
                                union_order_num:data.data.unionOrderNum,
                                status:2,
                                token:token,
                            },
                            dataType:'json',
                            success:function (e) {

                            }
                        });
                    });

                }else{
                    mag.toast("网络不可用");
                    return false;
                }
            }
        });

    });

</script>
<!--支付调用-->
<script>
    var payInfo = function (data) {

        let config;
        config = {
            'money': data.data.amount,
            'title': data.data.title,
            'des': data.data.des,
            'orderNum': data.data.trade_no,
            'unionOrderNum': data.data.unionOrderNum,
            'payWay':{
                'wallet':1,
                'weixin':1,
                'alipay':1,
            },
            'type': '客户端支付',
        };
        mag.pay(config, function(e){
            mag.toast('支付成功');
        }, function(){
            // 支付失败回调
            mag.toast('支付失败');
        });
    }

        // let img = new Image()
        // img.src = url
        // // img.setAttribute('crossOrigin', 'Anonymous')
        // img.crossOrigin = 'anonymous'
        // img.onload = function () {
        //     console.log('image on load', this)
        //     try {
        //         let that = this
        //         let canvas = document.createElement('canvas');
        //         canvas.width = img.width;
        //         canvas.height = img.height;
        //         canvas.getContext('2d').drawImage(that, 0, 0, img.width, img.height);
        //         // let base64 = canvas.toDataURL()
        //         dataURL=canvas.toDataURL('image/jpeg');
        //         // re({base64})
        //         console.log(dataURL);
        //     } catch (e) {
        //         console.log('image on load err', e)
        //     }
        // }
    // }
</script>
</html>